<template>
  <div class="app-container">
    <el-container>
      <el-header>
        <el-button style="display: inline-block;float: right">删除</el-button>
        <el-button style="display: inline-block;float: right">导出</el-button>
      </el-header>
      <el-main>
        <el-table
          v-loading="loading"
          :data="tableData"
          style="width: 100%"
        >
          <el-table-column
            type="selection"
            width="55"
          />
          <el-table-column
            fixed
            label="图片"
            width="100"
          >
            <template slot-scope="scope">
              <img :src="scope.row.image" width="90">
            </template>
          </el-table-column>
          <el-table-column
            prop="reference"
            label="reference"
            width="350"
          />
          <el-table-column

            label="meta信息"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.name }}</div>
              <hr>
              <div>{{ scope.row.meta_description }}</div>
            </template>
          </el-table-column>

          <el-table-column
            fixed="right"
            label="操作"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="handleSearch(scope.row)"
              >搜索同类图片
              </el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row)"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
    <el-dialog
      v-loading="loading"
      title="搜索结果"
      :visible.sync="dialogVisible"
      width="1280px"
    >
      <el-tabs v-if="currentIndex >= 0" v-model="activeName">
        <el-tab-pane label="匹配结果" name="first">
          <el-row v-if="currentIndex >= 0">
            <el-col :span="12">
              <div style="float:right;">
                <img :src="searchImageUrl" class="image" width="310px">
                <span style="display: block;bottom:0;">我们的图片</span>
              </div>

            </el-col>
            <el-col :span="12">
              <div style="float:left;">
                <img :src="searchResults[currentIndex].image" class="image" width="310px">
                <span style="display: block;bottom:0;">匹配的图片</span>
              </div>

            </el-col>

          </el-row>
          <el-row>
            <h3><span style="color: #df1d3f;">{{ searchResults[currentIndex].score }}</span></h3>
            <span>{{ searchResults[currentIndex].name }}</span>
            <hr>
            <span>{{ searchResults[currentIndex].meta_description }}</span>
            <hr>
            <span>{{ searchResults[currentIndex].price }}</span>
            <hr>
            <span>{{ searchResults[currentIndex].url }}</span>
            <div class="bottom clearfix">
              <el-button type="text" class="button">复制产品</el-button>
            </div>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="编辑产品" name="second">
          <el-form ref="currentOpRow" :model="currentOpRow" label-width="80px">
            <el-form-item label="对方名称">
              <el-input v-model="searchResults[currentIndex].name" :disabled="true" />
            </el-form-item>
            <el-form-item label="title">
              <el-input v-model="currentOpRow.name" />
            </el-form-item>
            <el-form-item label="对方描述">
              <el-input
                v-model="searchResults[currentIndex].meta_description"
                :disabled="true"
                type="textarea"
              />
            </el-form-item>
            <el-form-item label="选择模板">
              <el-select v-model="selectedtemplate" placeholder="选择模板" @change="onChangeTemplate">
                <el-option v-for="item in templates" :key="item.id" :label="item.name" :value="item" />
              </el-select>
            </el-form-item>
            <el-form-item label="meta description">
              <el-input v-model="currentOpRow.meta_description" type="textarea" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onUpdate">保存</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="OnNextItem">下一张匹配图片</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { GetBatchProducts, SearchSimilarFromBaidu, UpdateBatchUserProducts } from '@/api/erp/crawlproduct'
import { Get } from '@/api/erp/elicink/descriptionTemplate'

export default {
  data() {
    return {
      tableData: [],
      currentIndex: -1,
      searchResults: [],
      dialogVisible: false,
      loading: false,
      searchImageUrl: '',
      activeName: 'first',
      currentOpRow: {},
      selectedtemplate: 0,
      templates: []
    }
  },
  computed: {
    b_id: function() {
      return this.$route.params.b_id
    }
  },

  created() {
    this.loading = true
    GetBatchProducts(JSON.stringify({ id: this.b_id })).then((response) => {
      this.tableData = response.data
      this.loading = false
    })
    Get().then((response) => {
      this.templates = response.data.data
      console.log(this.templates)
    })
  },
  methods: {
    onChangeTemplate(v) {
      this.currentOpRow.meta_description = v.text
    },
    onUpdate() {
      // console.log(this.currentOpRow);
      UpdateBatchUserProducts(JSON.stringify(this.currentOpRow)).then((response) => {
        this.$notify({
          title: '修改成功',
          type: 'success'
        })
      }).catch(error => {
        console.log(error)
      })
    },
    handleProducts(row) {
      console.log(row)
    },
    handleDelete(row) {
      console.log('delete')
    },
    handleSearch(row) {
      this.currentOpRow = row
      this.dialogVisible = true
      this.loading = true
      this.searchImageUrl = row.image
      SearchSimilarFromBaidu(JSON.stringify({ imgurl: row.image })).then((response) => {
        this.loading = false
        this.searchResults = response.data
        this.currentIndex = 0
      }).catch(error => {
        console.log(error)
        this.loading = false
      })
    },
    OnNextItem() {
      this.currentIndex = this.currentIndex + 1
      if (this.searchResults.length <= this.currentIndex) {
        this.currentIndex -= 1
        console.log(this.searchResults.length)
      }
      console.log(this.currentIndex)
    }
  }
}
</script>

<style scoped>

</style>
